<template>
  <div class="titleList">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>产品尺码：
      <div class="textC marT">(最多添加40个)</div>
    </div>
    <!-- 循环获取颜色 -->
    <div class="titleDetail">
      <w-checkbox-group @on-change="selectSizeGroup" v-model="sizeIdList">
        <!-- 复选框 -->
        <div class="checkItem" v-for="(item, index) in specList" :key="index">
          <w-checkbox-item :label="item.specpropertyName" :result="item.specpropertyName">{{item.specpropertyName}}</w-checkbox-item>
          <i class="u-sku-del" v-if="item.isDel" @click="specList.splice(index, 1)"></i>
        </div>
        <!-- 其他 -->
        <div class="addNewOther">
          <div class="addNewC" v-show="!showInput" @click="showInput = true">
            <img src="../../../assets/new/btn_add.png" alt="" class="addBtnP">
            <span>其他</span>
          </div>
          <!-- 新增显示输入框 -->
          <div class="addNewC" v-show="showInput">
            <w-input holder="尺码名称" rule="isGoodsName" error="请输入中文，字母，数字或其组合" v-model="specpropertyName"></w-input>
            <button class="btn btnAdd" type="button" @click="addNewSize">提交</button>
          </div>
        </div>
      </w-checkbox-group>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Array,
        default: () => []
      },
      institutionId: {
        type: [String, Number],
        default: 0
      },
      productId: {
        type: [String, Number],
        default: 0
      },
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        // 是否展示颜色输入框
        showInput: false,
        // 选中的尺码id
        sizeIdList: [],
        // 颜色尺码
        sizeList: [],
        // 属性列表
        specList: [],
        // 颜色
        specpropertyName: ''
      }
    },
    created() {
      this.specList = JSON.parse(JSON.stringify(this.list))
      if (this.value) {
          this.sizeIdList = []
          this.value.forEach(v => {
            this.sizeIdList.push(v.specpropertyName)
          })
        }
    },
    watch: {
      value() {
        if (this.value) {
          this.sizeIdList = []
          this.value.forEach(v => {
            this.sizeIdList.push(v.specpropertyName)
          })
        }
      }
    },
    methods: {
      addNewSize() {
        // 如果没有输入颜色，则直接抛出
        if (!this.specpropertyName) {
          this.$toast('请输入尺码')
          return
        }
        let isInList = this.specList.filter(v => {
          return v.specpropertyName == this.specpropertyName
        })
        // 如果当前输入的颜色，已经输入过
        if (isInList.length > 0) {
          this.$toast('此尺码已经在列表中，请重新换一种尺码')
          return
        }
        this.specList.push({
          specpropertyName: this.specpropertyName,
          isDel: true
        })
        this.$emit('on-add', {
          specpropertyName: this.specpropertyName,
          isDel: true
        })
        this.specpropertyName = ''
        this.showInput = false
      },
      /**
       * 选择了尺码
       *
       * @param { Object } sizeId 选中的尺码id
       */
      selectSizeGroup(name) {
        // 备份一下当前操作的对象
        let arrList = JSON.parse(JSON.stringify(this.sizeList))
        // 清空一下列表数据（防止脏数据）
        this.sizeList = []

        // 将复选框中选中的id遍历出来放到列表中，返还给父级
        this.sizeIdList.forEach(v => {
          this.specList.forEach(v1 => {
            if (v == v1.specpropertyName) {
              let size = JSON.parse(JSON.stringify(Object.assign({}, v1, this.getSizeItem(arrList, v))))
              // 如果当前库存没有输入，则初始化一个库存
              if (!size.specpropertyInventCount) {
                this.$set(size, 'specpropertyInventCount', '')
              }
              this.sizeList.push(size)
            }
          })
        })
        // 通知父级处理完成
        this.$emit('input', this.sizeList)
        this.$emit('change', `${this.institutionId}${this.productId}`)
      },

      /**
       * 判断一个id是否在尺码列表中
       *
       * @param { Array }  arrList  上一个处理的对象
       * @param { Number } sizeName 尺码id
       */
      getSizeItem(arrList, sizeName) {
        let item = arrList.filter(v => {
          return v.specpropertyName == sizeName
        })
        return (item[0] || {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleList {
    .color-group {
      display: inline-block;
      float: right;
      line-height: 18px;

      .color-box {
        border: 1px solid #d9d7d7;
        display: inline-block;
        width: 10px;
        height: 10px;
      }
    }
  }
</style>